<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传组件</title>
    <% include include/link %>
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid widget-stage">
    <h1 class="widget-stage-title">Douyou8UI 项目通用组件库</h1>
    <p class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现。</p>
    <section class="widget-item">
        <div class="widget-item-title">基础上传组件</div>
        <div class="widget-item-cnt">
            <input type="file" class="file" >
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">多文件上传组件</div>
        <div class="widget-item-cnt">
            <input type="file" class="file" multiple >
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">没有缩略图</div>
        <div class="widget-item-cnt">
            <input type="file" class="file" data-show-preview="false" >
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">只读与禁止上传</div>
        <div class="widget-item-cnt">
            <input type="file" class="file" readonly="true" >
            <br />
            <input type="file" class="file" disabled="true" >
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">限制上传文件后缀名</div>
        <div class="widget-item-cnt">
            <input type="file" class="file" data-allowed-file-extensions='["apk","exe"]' >
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">初始化加载预览图</div>
        <div class="widget-item-cnt">
            <input type="file" id="file-1" name="input[]" multiple >
        </div>
    </section>
</div>
<% include include/footer %>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/locales/zh.min.js"></script>

<script>
$('.file').fileinput({
    language:'zh',
    showCaption: true,
    autoReplace: true,
    allowedPreviewTypes: ['image'],
    allowedFileExtensions: ['jpg','png','gif'],
    maxFileCount:10,
    enctype:'multipart/form-data',
    msgNoFilesSelected:'上传文件错误，请核查！',
    msgFileNotFound: 'sdfsdfdf'
});

$('#file-1').fileinput({
    language:'zh',
    initialPreview: [
        'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
    ],
    initialPreviewAsData: true,
    initialPreviewConfig: [
        {caption: "Moon.jpg", size: 930321, width: "120px", key: 1},
        {caption: "Earth.jpg", size: 1218822, width: "120px", key: 2}
    ],
    deleteUrl: "/site/file-delete",
    overwriteInitial: false,
    maxFileSize: 100,
    msgNoFilesSelected: '上传文件错误，请核查！'
});
</script>
</body>
</html>